<template>
	<header class="onex-header-container"  :style="headerStyle">
		<div class="onex-header-item" v-if="$settingStore.oneXUI.uiMode == CONST.UIMODE.TOP">
			<div class="onex-logo"><img src="../assets/logo.png" width="55"  /></div>
		</div>
		<div class="onex-header-item" v-if="$settingStore.oneXUI.uiMode == CONST.UIMODE.SIDE">
			<XIcon icon="system-uicons:chevron-right-double" size="25" :color="$settingStore.iconColor"  @click="() => ($settingStore.oneXUI.sideCollapsed = !$settingStore.oneXUI.sideCollapsed )" v-if="$settingStore.oneXUI.sideCollapsed"/>
			<XIcon icon="system-uicons:chevron-left-double" size="25" :color="$settingStore.iconColor"  @click="() => ($settingStore.oneXUI.sideCollapsed  = !$settingStore.oneXUI.sideCollapsed )" v-else/>
		</div>
		<div class="onex-header-item" style="flex:1;" v-if="$settingStore.oneXUI.uiMode == CONST.UIMODE.TOP">
			<x-menu mode="horizontal"></x-menu>
		</div>
		<div class="onex-header-item" style="flex:1;" v-if="$settingStore.oneXUI.uiMode == CONST.UIMODE.SIDE">
			
		</div>
		<div class="onex-header-item" style="justify-content:flex-end;width: 15%;">
			<a-tooltip title="全屏">
				<XIcon icon="system-uicons:fullscreen" :color="$settingStore.iconColor" size="25" @click="onFullScreen"/>
			</a-tooltip>
			<a-dropdown>
				<XIcon icon="system-uicons:user-male-circle" size="25" :color="$settingStore.iconColor"/>
				<template #overlay>
					<a-menu>
						<a-menu-item @click="onSetting">个人信息</a-menu-item>
						<a-menu-divider />
						<a-menu-item @click="onLogout">退出</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
			<XIcon icon="system-uicons:settings" :color="$settingStore.iconColor" size="25" @click="showDrawer"/>
		</div>
		<a-drawer v-model:open="data.drawerShow" placement="right" :closable="false">
			<Setting></Setting>
		</a-drawer>
		<a-modal v-model:open="data.modalShow" title="个人设置" centered	 @ok="data.modalShow = false" :maskClosable="false" >
			<p>some contents...</p>
			<p>some contents...</p>
			<p>some contents...</p>
		</a-modal>
	</header>
</template>

<script setup>
	import { reactive, computed} from 'vue';
	import PageUtil from '@/utils/PageUtil';
	import WidgetUtil from '@/utils/WidgetUtil.js';
	import { CONST } from '@/meta/constant';
	import XIcon  from '@/components/XIcon.vue';
	import XMenu from '@/views/XMenu.vue';
	import Setting from '@/views/Setting.vue';
	import {settingStore} from '@/stores/setting';
	const $settingStore = settingStore();
		
	const headerStyle = computed(() => {
		const { themeMode, uiMode } = $settingStore.oneXUI;
		const isDark = themeMode === 'dark' && uiMode === 'top';
		return {
			backgroundColor: themeMode === 'dark' || isDark ? 'rgba(0,21,41,1)' : 'rgba(255, 255, 255, 0.85)',
			color: isDark ? 'rgba(0,21,41,1)' : 'rgba(255, 255, 255, 0.85)',
		};
	});
	
	const data = reactive({
		drawerShow:false,
		modalShow:false
	});
	const showDrawer = () => {
		data.drawerShow = true;
	};
	
	const onSetting = function() {
		data.modalShow = true;
	}
	
	const onFullScreen = function() {
		console.log("onFullScreenonFullScreenonFullScreen");
		WidgetUtil.fullScreen();
	}
	
	const onLogout = function() {
		PageUtil.goLogin();
	}
</script>

<style scoped>
	.onex-header-container {
		width:100%;
		height:7%;
		padding: 0.3rem;
		display: flex;
		flex-direction: row;
		justify-content:left;
		align-items:center;	
	}
	.onex-header-item {
		padding: 0.5rem;
		display: flex;
		align-items: center;
			gap:0.5rem;
	}
	.onex-logo {
		width:100%;
		height:100%;
	}
</style>